<template>
  <div class="student-list__header">
    <el-icon color="#999999" size="22px"><Location /></el-icon>
    <span class="student-list__header-span">学生管理</span>
  </div>

  <div class="student-list__body">
    <div class="student-list__main">
      <div class="student-list__main__function">
        <div class="student-list__main__function-left">
          <div>
            <el-input placeholder="姓名或手机号" v-model="inp" />
          </div>

          <div>
            <el-date-picker
              class="data"
              v-model="value1"
              type="daterange"
              range-separator="→"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>

          <div>
            <el-button type="primary">
              <el-icon> <Search /> </el-icon><span></span>
              查询
            </el-button>
          </div>
        </div>
      </div>

      <el-table :data="displayStudentData" border>
        <el-table-column label="序号" width="140" align="center" type="index" />
        <el-table-column
          prop="username"
          label="用户名"
          width="240"
          align="center"
        />
        <el-table-column prop="sname" label="姓名" width="180" align="center" />
        <el-table-column
          prop="phone"
          label="手机号"
          width="240"
          align="center"
        />
        <el-table-column
          prop="buy"
          label="已购买课程"
          width="191"
          align="center"
        />
        <el-table-column
          prop="time"
          label="注册时间"
          width="191"
          align="center"
        />
        <template #empty><el-empty description="没有数据" /></template>
      </el-table>
      <div class="student-list__main__table-footer">
        <!-- 分页 -->
        <el-pagination
          v-model:currentPage="page"
          :page-size="pageSize"
          :disabled="disabled"
          background
          layout="total, prev, pager, next"
          :total="tableData.length"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 引入 api 方法
import { getStudentData } from "@/api/consumer";
import { Search } from "@element-plus/icons-vue";
export default {
  name: "student-list",
  data() {
    return {
      tableData: [],
      value1: "",
      page: 1,
      pageSize: 10,
      disabled: false,
      inp: "",
    };
  },
  methods: {
    // 获取数据
    fetchData() {
      getStudentData().then((data) => {
        // console.log("****", data, "****", data.data);
        // 将data.data 赋值给 tableData
        this.tableData = data.data;
      });
    },
  },
  computed: {
    /* 根据 page 将 tableData 裁切之后用于展示的 表格数据 */
    displayStudentData() {
      return this.tableData.slice((this.page - 1) * 10, this.page * 10);
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.student-list__header {
  height: 48px;
  background-color: #f8f8f8;
  overflow: hidden;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding-left: 24px;
  &-span {
    padding-left: 8px;
  }
}
.student-list__body {
  flex: 1;
  // padding: 20px;
  display: flex;
  flex-direction: column;
  // overflow-y: auto;
}
.student-list__main {
  background-color: #f8f8f8;
  width: calc(100% - 50px);
  height: 100%;
  margin: 24px 24px 5px 24px;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  // overflow-y: auto;
  &__function {
    height: 80px;
    width: 100%;
    // padding: 0 32px;
    display: flex;
    // background-color: red;

    &-left {
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      padding-left: 5px;

      &-left,
      div {
        margin: 0 5px;
      }
    }
  }
  &__table {
    height: calc(100% - 80px);
    overflow: hidden;
  }
  &__table-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
  }
}
// .el-table--fit {
//   background-color: #f8f8f8;
//   height: 100%;
// }
.el-table {
  --el-table-header-bg-color: #ecf7ff;
  // flex: 1;
  background-color: #f8f8f8;
  width: 100%;
}
</style>
